{extend name="base"/}
{block name="resources"}
<style>
    .ns-body-content{padding: 0;margin: 10px;background-color: #fff;}
    /* 公共*/
    h2.apply-h2-title{margin-top: 80px;margin-bottom: 80px;font-size:34px;font-weight:400;color:rgba(93,93,93,1);text-align: center;}
    .apply-btn-box{margin-top: 50px;margin-bottom: 30px;text-align: center;}
    .ns-dis-input{background-color: #f7f7f7; cursor: no-drop;}
    .ns-dis-input:hover{border-color: #e6e6e6 !important;}
    /* 选择店铺等级 */
    .store-level{padding: 0 50px 50px;margin: auto;display: flex;flex-wrap: wrap;justify-content: center;}
    .store-level > li:first-of-type{margin-left: 0;}
    .store-level > li{margin-bottom: 30px;margin-left: 20px;padding: 50px 35px 30px;width: 260px;text-align: center;background-color: #fff;box-sizing: border-box;border: 1px solid #E9E9E9;border-radius: 2px;}
    .store-level > li:hover{border-color: transparent; box-shadow: 0 0 20px 0 rgba(0,0,0,.07);}
    .store-level .group_name{margin: 10px;font-size: 18px;font-weight: 400;line-height: 25px;color: #323233;}
    .store-level .remark{display: inline-block;margin: 0 -10px 20px;font-size: 12px;line-height: 19px;color: #646566;}
    .store-level-sublevel{padding-top: 20px;border-top: 1px solid #f2f2f2;}
    .store-level-sublevel li{text-align: left;height: 28px;line-height: 28px;color: #646566;}
    .store-level-sublevel li .is-checked{color: #ccc;}
    .store-level button{margin-top: 25px;}
    /* 申请续签 */
    .payment-voucher{width: 760px;margin: auto;}
</style>
{/block}
{block name="main"}
<!-- 开店套餐 -->
<div class="store-level-box">
    <h2 class="apply-h2-title">选择开店套餐</h2>
    <ul class="store-level">
        {foreach $group_info as $shop_group_key => $shop_group_val}
        <li data-group_id = {$shop_group_val["group_id"]}>
            <h2 class="group_name">{$shop_group_val["group_name"]}</h2>
            <span class="remark">{$shop_group_val["remark"]}</span>
            <ul class="store-level-sublevel">
                {foreach $shop_group_val["promotion"] as $promotion_key => $promotion_val}
                <li>
                    {if $promotion_val.is_checked == 1}<span class="ns-text-color">√</span>{else/}<span class="ns-red-color">×</span>{/if}
                    <span class="{if $promotion_val.is_checked != 1} is-checked{/if}">{$promotion_val.title}</span>
                </li>
                {/foreach}
            </ul>
            <button class="layui-btn ns-bg-color">￥ {$shop_group_val.fee}/年</button>
        </li>
        {/foreach}
    </ul>
</div>

<!-- 提交支付凭证 -->
<div class="payment-voucher layui-hide layui-form">
    <h2 class="apply-h2-title">填写申请续签支付信息</h2>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>店铺名称：</label>
        <div class="layui-input-inline">
            <input type="text" name="shop_name" disabled class="layui-input ns-dis-input ns-len-long" value="{$shop['site_name']}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>开店套餐：</label>
        <div class="layui-input-inline">
            <input type="text" disabled class="layui-input ns-dis-input ns-len-long" name="shop_group_name" value="">
        </div>
    </div>
    <!-- 开店套餐id隐藏域 -->
    <input type="hidden" class="layui-input" name="shop_group_id" value="">

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>主营行业：</label>
        <div class="layui-input-inline">
            <input type="text" disabled class="layui-input ns-dis-input ns-len-long" name="category_name" value="{$shop['category_name']}">
        </div>
    </div>
    <!-- 主营行业id隐藏域 -->
    <input type="hidden" class="layui-input" name="category_id" value="{$shop['category_id']}">


    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>入驻时长：</label>
        <div class="layui-input-inline">
            <select name="apply_year" lay-verify="required" lay-search="" lay-filter="apply_year">
                <option value="">请选择入驻时长</option>
                {for start="1" end="5"}
                <option value="{$i}">{$i}</option>
                {/for}
            </select>
        </div>
        <div class="layui-word-aux">年</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>保证金：</label>
        <div class="layui-input-block">
            <p class="ns-input-text color-red payment-cash-deposit">0.00 元</p>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>服务费：</label>
        <div class="layui-input-block">
            <p class="ns-input-text color-red payment-service">0.00 元</p>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>总计：</label>
        <div class="layui-input-block">
            <p class="ns-input-text color-red payment-store-charges">0.00 元</p>
        </div>
        <div class="ns-word-aux">
            说明： 店铺费用 = 服务费 * 入驻年限 + 保证金；
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label img-upload-lable"><span class="required">*</span>付款凭证：</label>
        <div class="layui-input-inline img-upload">
            <input type="hidden" class="layui-input" name="paying_money_certificate" lay-verify="required"/>
            <div class="upload-img-block icon"  data-upload data-id="voucher" data-name="paying_money_certificate">
                <div class="upload-img-box" id="voucher">
                    <div class="ns-upload-default">
                        <img src="SHOP_IMG/upload_img.png" />
                        <p>点击上传</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">付款凭证说明：</label>
        <div class="layui-input-inline">
            <textarea name="paying_money_certificate_explain" class="layui-textarea ns-len-long" placeholder="请输入付款凭证说明"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">收款账户信息：</label>
        <div class="layui-input-block">
            <!-- 结算信息 -->
            <table class="layui-table">
                <colgroup>
                    <col width="25%">
                    <col width="25%">
                    <col width="25%">
                    <col width="25%">
                </colgroup>
                <tbody>
                <tr>
                    <td align="right">银行开户名：</td>
                    <td>{$receivable_config.value.bank_account_name}</td>
                    <td align="right">银行账户：</td>
                    <td>{$receivable_config.value.bank_account_no}</td>
                </tr>
                <tr>
                    <td align="right">开户名称：</td>
                    <td>{$receivable_config.value.bank_name}</td>
                    <td align="right">开户所在地：</td>
                    <td>{$receivable_config.value.bank_address}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="apply-btn-box">
        <button class="ns-bg-color layui-btn" lay-submit lay-filter="payment-voucher-complete">点击提交</button>
    </div>

</div>
{/block}
{block name="script"}
<script>
    var groupId,groupName;

    /**
     * 开店套餐
     */
    $("body").on("click",".store-level button",function () {

        //获取开店套餐id和名称
        groupId = $(this).parent().attr("data-group_id");
        groupName = $(this).parent().find(".group_name").text();

        $("input[name='shop_group_name']").val(groupName);
        $("input[name='shop_group_id']").val(groupId);

        paymentAmount();

        $(".store-level-box").addClass("layui-hide");
        $(".payment-voucher").removeClass("layui-hide");
    });

    /* 资质审核 - 计算缴费金额 */
    function paymentAmount() {
        var categoryId = "{$shop['category_id']}",
            applyYear = $(".payment-voucher select[name=apply_year] option:selected").val();
        console.log(categoryId ,groupId , applyYear)
        if (categoryId && groupId && applyYear) {
            $.ajax({
                url: ns.url("shop/apply/getApplyMoney"),
                data: {
                    "apply_year": applyYear,
                    "category_id": categoryId,
                    "group_id": groupId
                },
                dataType: 'JSON',
                type: 'POST',
                success: function (data) {
                    console.log(data)
                    $(".payment-cash-deposit").text(data.code.paying_deposit + "元");
                    $(".payment-store-charges").text(data.code.paying_amount + ' 元');
                    $(".payment-service").text(data.code.paying_apply + "元");
                }
            })
        }
    };

    layui.use("form",function () {
        var form = layui.form;
		form.render();
		
        form.on('select(apply_year)', function (data) {
            paymentAmount();
        });

        /* 支付凭证 */
        form.on('submit(payment-voucher-complete)', function (data) {
            $.ajax({
                url: ns.url("shop/cert/reopen"),
                dataType: 'JSON',
                type: 'POST',
                data: data.field,
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg("申请续签成功" ,{anim: 5},function(){
                            location.href = ns.url("shop/account/reopenlist");
                        })
                    }else{
                        layer.msg(data.message);
                    }
                }
            })
        });
    });

    /* 图片上传 */
    $("[data-upload]").each(function () {

        var id = $(this).attr("data-id");
        var name = $(this).attr("data-name");

        layui.use("upload", function () {
            upload = layui.upload;

            upload.render({
                elem: "#" + id,
                url: ns.url("shop/upload/image"),
                done: function (res) {

                    if (res.code >= 0) {
                        $("input[name=" + name + " ]").val(res.data.pic_path);
                        $("#" + id).html("<img src=" + ns.img(res.data.pic_path) + " >");
                    }
                    return layer.msg(res.message);
                }
            });
        });
    });
</script>
{/block}